import { useState,useRef,createContext,useContext } from "react";
import "./App.css";

const MsgContext = createContext()
function Son(props){
  console.log(props)
  // props.name ='hello'
  return (
    <div>A:this is son
      <span>name is {props.name}</span>
      {props.children}
      <button onClick={()=>{props.onGetMsg('hello Tom')}}>传递数据</button>
    </div>
  )
}

function SonB({msg}){
  const newMsg = useContext(MsgContext);
  return (
    <div>B:this is Son 传递的数据 {msg} {newMsg}</div>
  )
}


function App(){
  let name = 'jack'
  let [msg,setMsg] = useState('hello')
  const getMsg = (msg)=>{
    console.log(msg)
    setMsg(msg)
  }
  return (
    <div>
      <MsgContext.Provider value={msg}>
      <h1>这是父组件</h1>
     <Son 
     name={name}
     age={20}
     cb={()=>{return 123}}
     isTrue={true}
     list={['Vue','React']}
     obj={{name:'jack',age:20}}
     onGetMsg={getMsg}
     
     >
      <span>this is span</span>
     </Son>
     <SonB msg={msg}></SonB>
      </MsgContext.Provider>
   
    </div>
  )
}

export default App;